<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>购物车案例</title>
</head>

<body>
    <div id="app">
        <!-- 购物车提示框 -->
        <div class="pageStyle">
            <el-alert title="你的私人购物车" type="success" center :closable="false" style="width: 90%;" />
        </div>
        <!-- 购物车表格 -->
        <div class="pageStyle">
            <el-table :data="tableData" border style="width: 90%">
                <!-- 第一列 -->
                <el-table-column prop="id" label="序号" align="center" width="100"></el-table-column>
                <!-- 第二列 -->
                <el-table-column label="图片" align="center">
                    <template #default="scope">
                        <el-image :src="scope.row.imgUrl" fit="fill"></el-image>
                    </template>
                </el-table-column>
                <!-- 第三列 -->
                <el-table-column prop="name" label="名称" align="center"></el-table-column>
                <!-- 第四列 -->
                <el-table-column prop="price" label="单价" align="center"></el-table-column>
                <!-- 第五列 -->
                <el-table-column label="数量" align="center">
                    <template #default="scope">
                        <el-input-number v-model="scope.row.count" :min="1"></el-input-number>
                    </template>
                </el-table-column>
                <!-- 第六列 -->
                <el-table-column label="金额" align="center">
                    <template #default="scope">
                        <p>{{scope.row.price * scope.row.count}}</p>
                    </template>
                </el-table-column>
                <!-- 第七列 -->
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 删除对话框 -->
            <el-dialog v-model="dialogVisable" width="33%" title="删除宝贝">
                <span>确定删除该宝贝吗？</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="handleConfirm">确定</el-button>
                        <el-button @click="dialogVisable=false">取消</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <!-- 购物车汇总 -->
        <div class="pageStyle">
            <span>商品类型总数&nbsp;{{this.tableData.length}}&emsp;总计(不含运费):￥<span style="color: red;">{{totalPrice}}</span></span>
        </div>
    </div>
    <script>
        const App = {
            data() {
                return {
                    index: undefined,
                    dialogVisable: false,
                    tableData: [
                        {
                            id: 1,
                            name: 'Nike Hyperdunk 2008 Marty McFly',
                            imgUrl: 'http://static.shihuocdn.cn/def/20220425/0d7514473d23d0f99ab431a39dd7a01a1650884618.jpg?imageView2/1/w/1300/h/1300/format/webp/q/90/interlace/1#keepOn',
                            price: '10559',
                            count: '3'
                        },
                        {
                            id: 2,
                            name: 'Nike Zoom KD 4 Think 16 (Thunderstruck)',
                            imgUrl: 'http://static.shihuocdn.cn/trade/reposition/2018-08-02/e85bc1c693da0bb62c03dd1014c19155.png?imageView2/1/w/1300/h/1300/format/webp/q/90/interlace/1#keepOn',
                            price: '2419',
                            count: '3'
                        },
                        {
                            id: 3,
                            name: 'Nike Hypermax Neon',
                            imgUrl: 'http://static.shihuocdn.cn/def/20191030/f3699e20e3d4b07564c229d489f320831572438936.jpg?imageView2/1/w/1300/h/1300/format/webp/q/90/interlace/1#keepOn',
                            price: '2277',
                            count: '3'
                        },
                        {
                            id: 4,
                            name: 'Nike Adapt BB 2.0 Mag',
                            imgUrl: 'https://static.shihuocdn.cn/admin/imgs/20210929/91a4e18523f184b851044e85cda96e79_1030x1030.jpg?imageView2/1/w/1300/h/1300/format/webp/q/90/interlace/1#keepOn',
                            price: '1969',
                            count: '3'
                        },
                    ]
                };
            },
            methods: {
                // 点击删除
                handleDelete(index, row) {
                    // 记录下标
                    this.index = index
                    // 弹出提示框
                    this.dialogVisable = true
                },
                // 点击确定
                handleConfirm() {
                    // 删除商品
                    this.tableData.splice(this.index, 1)
                    // 关闭提示框
                    this.dialogVisable = false
                }
            },
            computed: {
                // 计算总金额
                totalPrice() {
                    let total = 0
                    for (let item of this.tableData) {
                        total += item.price * item.count
                    }
                    return total
                }
            }
        };
        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>
</body>

</html>
<style scoped>
    .pageStyle {
        margin: 20px 0;
        margin-left: 5%;
    }
</style>